<script setup lang="ts">
  import { useDrag } from 'vue3-dnd'
  import { toRefs } from '@vueuse/core'

  interface DropListItem {
    name: string
    id: string
    dropId: string
    style: {
      position: string
      left: number
      top: number
    }
  }
  const props = defineProps<{
    dragItem: DropListItem
  }>()

  const [dragItemCollect, drag1] = useDrag(() => ({
    type: "box",
    item: {
      name: props.dragItem.name,
      id: props.dragItem.id,
      style: props.dragItem.style
    },
    end: (item, monitor) => {
      // console.log("dragItem", item)
      // console.log("dragItem", monitor)
    },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  }))

  const closeBox = (res) => {
    emit("closeBox", res)
  }

  const emit = defineEmits(["closeBox"])
</script>

<template>
  <div class="dragItem-box" :ref="drag1" :style="{left: `${props.dragItem.style.left}%`, top: `${props.dragItem.style.top}%`}">
    <div class="dragItem-box-close" @click="closeBox( props.dragItem)">X</div>
    {{ props.dragItem.name }}
  </div>
</template>

<style scoped>
  .dragItem-box {
    position: absolute;
    width: 30px;
    height: 30px;
    cursor: move;
    background-color: #37b7ee;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dragItem-box-close {
    position: absolute;
    right: -4px;
    top: -10px;
    color: red;
    cursor: pointer;
  }
</style>